<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8">
  <title>二维码识别后台程序</title>
  <!--    引入css文件-->
  <link rel="stylesheet" th:href="@{/layui/css/layui.css}" href="../static/layui/css/layui.css" type="text/css">
  <style>
    body {
      width: 94%;
      margin: 0 auto;
    }

    .layui-form-select {
      width: 240px;
      display: inline-block;
    }

    /*.layui-tab-item {*/
    /*    height: 100%;*/
    /*}*/
    .btn-box {
      background-color: #fff;
      padding-bottom: 10px;
      border: 1px solid #eee;
      border-bottom: 0;
    }

    .add-stat {
      margin-left: 10px;
      margin-top: 10px;
    }

    .layui-table-view {
      margin: 0 0 20px;
    }
  </style>
  <!--   引入js文件-->
  <script th:src="@{/jquery.min.js}" src="../static/jquery.min.js" type="text/javascript"></script>
  <script th:src="@{/layui/layui.js}" src="../static/layui/layui.js" type="text/javascript"></script>
</head>

<body>
  <!--    编辑删除tool-->
  <script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit" style="color:#fff;">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" style="color:#fff;">删除</a>
  </script>
  <div class="btn-box">
    <button type="button" class="layui-btn add-stat">添加场站</button>
  </div>
  <table id="stat_table" lay-filter="stat"></table>

  <!--            新增表单-->
  <div id="add-main" style="display: none;">
    <form class="layui-form" id="add-form" action="">
      <!--                    <div class="layui-form-item">-->
      <!--                        <label class="layui-form-label" style="width: 100px">场站id</label>-->
      <!--                        <div class="layui-input-block">-->
      <!--                            <input type="text" name="id" required style="width: 240px" lay-verify="required" placeholder="请输入场站id" autocomplete="off" class="layui-input" onkeyup="value=value&&Number(value.replace(/^[^\d]+/g,''))" onblur="value=value&&Number(value.replace(/^[^\d]+/g,''))">-->
      <!--                        </div>-->
      <!--                    </div>-->
      <div class="layui-form-item center">
        <label class="layui-form-label" style="width: 100px">场站名称</label>
        <div class="layui-input-block">
          <input type="text" name="name" required value="" style="width: 240px" lay-verify="required"
            placeholder="请输入场站名称" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item center">
        <label class="layui-form-label" style="width: 100px">场站缩略名</label>
        <div class="layui-input-block">
          <input type="text" name="abbreviation" required value="" style="width: 240px" lay-verify="required"
            placeholder="请输入场站缩略名" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item center">
        <label class="layui-form-label" style="width: 100px">场站类型</label>
        <div class="layui-input-block">
          <!--                            <div class="layui-input-inline" style="width: 240px">-->
          <select name="type" lay-verify="required">
            <option value="">请选择场站类型</option>
            <option value="0">风电场</option>
            <option value="1">光伏电场</option>
          </select>
          <!--                            </div>-->
          <!--                            <input type="text" name="type" required value="" style="width: 240px" lay-verify="required" placeholder="请输入场站类型" autocomplete="off" class="layui-input">-->
        </div>
      </div>
      <div class="layui-form-item center">
        <label class="layui-form-label" style="width: 100px">所属中心</label>
        <div class="layui-input-block">
          <input type="text" name="belong" required value="" style="width: 240px" lay-verify="required"
            placeholder="请输入所属中心" autocomplete="off" class="layui-input">
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="save">立即提交</button>
          <button type="reset" class="layui-btn layui-btn-primary" id="closeBtn">重置</button>
        </div>
      </div>
    </form>
  </div>
  <!--            编辑表单-->
  <div id="edit-main" style="display: none;">
    <form class="layui-form" id="edit-form" action="">
      <div class="layui-form-item">
        <label class="layui-form-label" style="width: 100px">场站ID</label>
        <div class="layui-input-block">
          <input type="text" name="id" required style="width: 240px" lay-verify="required" placeholder="请输入场站id"
            autocomplete="off" class="layui-input" id="stat_id" disabled="">
        </div>
      </div>
      <div class="layui-form-item center">
        <label class="layui-form-label" style="width: 100px">场站名称</label>
        <div class="layui-input-block">
          <input type="text" name="name" required value="" style="width: 240px" lay-verify="required"
            placeholder="请输入场站名称" autocomplete="off" class="layui-input" id="stat_name">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label" style="width: 100px">场站缩略名</label>
        <div class="layui-input-block">
          <input type="text" name="abbreviation" required style="width: 240px" lay-verify="required"
            placeholder="请输入缩略名" autocomplete="off" class="layui-input" id="stat_abbr">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label" style="width: 100px">场站类型</label>
        <div class="layui-input-block">
          <select name="type" lay-verify="required" id="stat_type" lay-filter="stat_update_select">
            <option value="">请选择场站类型</option>
            <option value="0">风电场</option>
            <option value="1">光伏电场</option>
          </select>
          <input type="hidden" required style="width: 240px" placeholder="请输入场站类型" autocomplete="off"
            class="layui-input" id="hidden_stat_type">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label" style="width: 100px">所属中心</label>
        <div class="layui-input-block">
          <input type="text" name="belong" required style="width: 240px" lay-verify="required" placeholder="请输入场站归属地"
            autocomplete="off" class="layui-input" id="stat_belong">
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="save2">立即提交</button>
        </div>
      </div>
    </form>
  </div>
</body>
<script th:inline="javascript">
  let statData = /*[[${result.data}]]*/{}
  // 渲染表格
  layui.use('table', function () {
    let table = layui.table;

    // 渲染场站列表
    table.render({
      elem: '#stat_table'
      , limit: 9999 //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
      , data: statData || []
      , cols: [
        [ //表头
          { field: 'id', title: 'id', width: 120, align: 'center' }
          , { field: 'name', title: '场站名称', minWidth: 160, align: 'center' }
          , { field: 'abbreviation', title: '场站缩略名', minWidth: 160, align: 'center' }
          , { field: 'belong', title: '所属', minWidth: 160, align: 'center' }
          , { field: 'type', title: '场站类型', minWidth: 160, templet: typeFormat, align: 'center' }
          , { fixed: 'right', title: '操作', minWidth: 180, align: 'center', toolbar: '#barDemo' }
        ]
      ]
    });


    //监听工具条
    table.on('tool(stat)', function (obj) {
      let data = obj.data;
      if (obj.event === 'detail') {
        layer.msg('ID：' + data.id + ' 的查看操作'); // 暂时不增加查看管理员功能
      }
      else if (obj.event === 'del') {
        layer.confirm('确定要删除场站（'+ data.name +'）么', function (index) {
          $.ajax({
            type: "GET",
            url: '/qrdepot/delete',
            contentType: 'application/json',
            data: { id: data.id },
            // data: JSON.stringify(data.id),
            success: function (res) {
              if (res.code != 0) {
                layer.alert(res.msg)
              } else {
                // alert
                // layer.alert(res.msg)
                layer.alert('删除成功')
                obj.del();
                layer.close(index);
                // 删除场站后，与之相关的对应关系也要删除，所以刷新整个页面
                parent.location.reload();
              }
            }
          })
        });
      } else if (obj.event === 'edit') {
        let opts = document.getElementsByTagName('option')
        // layer.alert('编辑行：<br>' + JSON.stringify(data.name))
        $("#stat_id").val(data.id);
        $("#stat_name").val(data.name);
        $("#stat_abbr").val(data.abbreviation);
        $("#hidden_stat_type").val(data.type);
        // $("#stat_type").val(data.type );
        $("#stat_belong").val(data.belong);
        setType() // 加载类型
        layer.open({
          type: 1, skin: 'layui-layer-rim', //加上边框
          area: ['450px', '400px'], //宽高
          content: $("#edit-main"),
          title: ['编辑场站', 'margin-bottom:15px'],
          success: function (layero, index) {
            // success成功后执行的回调
            // yes 点击确认后执行的回调 但是这里由于是表单，监听的submit事件
          }
        });
      }
    });
  });

  //  新增事件
  $('.add-stat').on('click', function () {
    let type = $(this).data('type'); //页面层
    layer.open({
      type: 1, skin: 'layui-layer-rim', //加上边框
      area: ['430px', '350px'], //宽高
      content: $("#add-main"),
      title: ['新增场站', 'margin-bottom:15px']
    });
  });
  // 注册弹层的表格
  layui.use(['layer', 'form'], function () {
    let layer = layui.layer, $ = layui.jquery, form = layui.form;
    //表单验证

    //提交监听事件
    form.on('submit(save)', function (data) {
      params = data.field;
      submit($, params);
      return false;
    })
    //修改时提交监听事件
    form.on('submit(save2)', function (data) {
      params = data.field;
      submit2($, params);
      return false;
    })

    // 更新的select事件
    form.on('select(stat_update_select)', function (data) {
      // console.log(data)
      // console.log(data.value)
    })


  })

  //增加提交
  function submit ($, params) {
    $.ajax({
      type: "post",
      url: '/qrdepot/add',
      data: JSON.stringify(params),
      contentType: 'application/json',
      success: function (res) {
        if (res.code != 0) {
          layer.alert(res.msg)
        } else {
          layer.msg(res.msg, { icon: 0, time: 500 },
            function () {
              parent.location.reload();
              // 页面刷新
              return false
            })
        }
      }
    });
  }
  //修改提交
  function submit2 ($, params) {
    $.ajax({
      type: "POST",
      url: '/qrdepot/update',
      data: JSON.stringify(params),
      contentType: 'application/json',
      success: function (res) {
        if (res.code != 0) {
          layer.alert(res.msg)
        } else {
          layer.msg(res.msg,
            { icon: 0, time: 500 },
            function () {
              parent.location.reload();
              // 页面刷新
              return false
            })
        }
      }
    });
  }

  // 类型格式化
  function typeFormat (d) {
    let str
    if (d.type == 0) {
      str = '风电场'
    } else if (d.type == 1) {
      str = '光伏电场'
    } else {
      str = d.type || ''
    }
    return str
  }

  //数据回显
  function setType (value) {
    $('#stat_type').html(`
      <option value="">请选择场站类型</option>
      <option value="0">风电场</option>
      <option value="1">光伏电场</option>
      `)
    $('#stat_type').each(function () {
      let hiddenType = $('#hidden_stat_type').val()

      $(this).children("option").each(function (i, n) {
        if (this.value == hiddenType) {
          $(this).attr("selected", "selected")
        }
      })
      layui.form.render('select');
    })
  }



</script>

</html>